<template>
  <div class="ano-panel ano-fonts">
    <AnoPanelHd 
      :hasBackBtn="true" 
      title="选择字体"
      @onBack="handleConfirm"
      @onClose="handleConfirm" />

    <div class="ano-panel-bd" v-loading="loading">
      <ul class="list">
        <li class="item" 
          v-for="item in fonts" 
          :key="item.id" 
          @click="handleSelect(item)">
            <div class="font" :style="{fontFamily: item.fontName}">{{ text }}</div>
            <div class="name">{{ item.fontName }}</div>
          </li>
      </ul>
    </div>
  </div>
</template>

<script>
import AnoPanelHd from './anoPanelHd.vue'
import { getFonts } from '@/api/design'

export default {
  name: 'anoArtPanel',
  components: {
    AnoPanelHd
  },
  props: {
    text: {
      type: String,
      default: 'A'
    }
  },
  data() {
    return {
      loading: true,

      colors: [
        { value: '宋体'},
        { value: '微软雅黑'},
        { value: '微软雅黑1'},
        { value: '微软雅黑2'},
        { value: '微软雅黑3'},
        { value: '微软雅黑4'},
        { value: '微软雅黑5'},
        { value: '微软雅黑6'},
        { value: '微软雅黑7'},
        { value: '微软雅黑8'},
        { value: '微软雅黑9'},
      ],
      fontColor: '',

      fonts: [
        // {
        //   fontHead: "/sys-font/Arial_60.png",
        //   fontName: "Arial",
        //   id: 1,
        // }
      ]
    }
  },
  created() {
    getFonts({
      inputTxt: this.text
    }).then(res => {
      if (res.data.code === '0') {
        this.fonts = res.data.result.records || []
      }
    }).finally(() => {
      this.loading = false
    })
    console.log('anoFonts created')
  },
  methods: {
    handleSelect(item) {
      this.$emit('fontChange', item)
    },
    handleConfirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="less" scoped>
.ano-fonts {
  .list {
    text-align: center;
    padding: 20px 42px;
    .item {
      margin-bottom: 15px;
      cursor: pointer;
      user-select: none;
      .font {
        font-size: 20px;
        &:hover {
          color: @primary-color;
        }
      }
      .name {
        font-size: 12px;
        color: #999;
        margin-top: 2px;
      }
    }
  }
   .handle-wrap {
     padding-right: 42px;
     text-align: right;
     .panel-btn {
       width: 80px;
     }
   }
 }
</style>
